<template>
  <a-modal
    title="编辑文章"
    width="80%"
    :dialogStyle="{ top: '20px' }"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
      
        <a-form-item
          style="display: none;"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input v-decorator="['Id']" />
        </a-form-item>
        
        <a-form-item
          label="课程名称"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入课程名称" v-decorator="['CourseName', {rules: [{required: true, message: '请输入课程名称！'}]}]" />
        </a-form-item>

        <a-form-item
          label="课程分类"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
                <a-select allowClear placeholder="请选择课程分类"  v-decorator="['CourseTypeId', {rules: [{required: true, message: '请选择课程分类'}]}]">
                  <a-select-option v-for="item in courseTypeList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
                </a-select>
        </a-form-item>

        <a-form-item
          label="课程来源"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
                <a-select allowClear placeholder="请选择课程来源"  v-decorator="['Coursesource', {rules: [{required: true, message: '请选择课程来源'}]}]">
                  
                      <a-select-option :value="0">自有课程</a-select-option>
                      <a-select-option :value="1">链接课程</a-select-option>
                </a-select>
        </a-form-item>
        
        <a-form-item
          label="讲师"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
                <a-select allowClear placeholder="请选择讲师"  v-decorator="['LecturerId', {rules: [{required: true, message: '请选择讲师'}]}]">
                  <a-select-option v-for="item in jiangshilist" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
                </a-select>
        </a-form-item>

        
        <a-form-item
          label="课程时长"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入课程时长" v-decorator="['Duration', {rules: [{required: true, message: '请输入课程时长！'}]}]" />
        </a-form-item>

        <a-form-item
          label="课程简介"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入课程简介" v-decorator="['Description', {rules: [{required: true, message: '请输入课程简介'}]}]" />
        </a-form-item>
        
        <a-form-item
          label="课程状态"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-radio-group v-decorator="['IsEnable', {rules: [{required: false, message: '请选择是否显示！'}]}]">
            <a-radio :value="true">启用</a-radio>
            <a-radio :value="false">禁用</a-radio>
          </a-radio-group>
        </a-form-item>

        
        <a-form-item
                        label="上传图片"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback
                        >
                        
          <a-input placeholder="" style="display:none"  />
                            <a-upload
                                list-type="picture-card"
                                class="pic-uploader"
                                :show-upload-list="false"
                                :before-upload="beforeUpload"
                            >
                                <div>
                                    <a-icon :type="uploadloading ? 'loading' : 'plus'" />
                                    <div class="ant-upload-text">
                                        上传图片
                                    </div>
                                </div>
                            </a-upload>
                            
                              <div class="img-border-div" v-if="courseImage" >
                                <img class="u-img" :src="courseImage" alt="img" />
                                <div class="img-b-div">
                                  <a-icon class="eye-a" type="eye" @click="handlePreview(courseFile)" />
                                  <a-icon class="delete-a" type="delete" @click="deleteImg" />
                                </div>
                              </div>
                            <span>（大小不要超过1M）</span>
                            
            <a-modal :visible="previewVisible" :footer="null" @cancel="handlePreviewCancel">
              <img alt="example" style="width: 100%; marginTop:20px;" :src="previewImage || courseImage" />
            </a-modal>
        </a-form-item>

        
        <a-form-item
                        label="上传视频"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback
                        v-if="form.getFieldValue('Coursesource')  ===0"
                        >
                        
          <a-spin tip="视频上传中，请勿关闭" :spinning="videouploadloading">
          <a-input placeholder="" style="display:none" />
                            <a-upload
                                :customRequest="customRequest"
                                list-type="picture-card"
                                class="pic-uploader"
                                :show-upload-list="false"
                            >
                                <div>
                                    <a-icon :type="uploadloading ? 'loading' : 'plus'" />
                                    <div class="ant-upload-text">
                                        上传视频
                                    </div>
                                </div>
                            </a-upload>
                            
                              <div class="img-border-div" v-if="courseVideo" >
                                <video class="video-img" :src="courseVideo"></video>
                                <div class="img-b-div">
                                  <a-icon class="eye-a" type="eye" @click="handleVideoPreview()" />
                                  <a-icon class="delete-a" type="delete" @click="deleteVideo" />
                                </div>
                              </div>
                            
            <a-modal :visible="previewVideoVisible" :footer="null" @cancel="handlePreviewVideoCancel">
              <video style="width: 100%; marginTop:20px;" :src="courseVideo" controls></video>
            </a-modal>
          </a-spin>
        </a-form-item>
        
        <a-form-item
          label="链接地址"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
          v-if="isShowVlink"
        >
          <a-input placeholder="请输入链接地址" v-decorator="['VideosLink', {rules: [{required: true, message: '请输入链接地址！'}]}]" />
        </a-form-item>
      </a-form>

    </a-spin>
  </a-modal>
</template>

<script>
  import { courseEdit } from '@/api/modular/garden/courseManage';
  import {AntdEditor} from '@/components/index'
  const plainOptions = [
    { label: '家长端', value: 1 },
    { label: '园务端', value: 2 },
  ];

  export default {
    components: { AntdEditor},
    data () {
      return {
        plainOptions,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        },
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        courseImage: '',
        courseFile: null,
        uploadloading: false,
        courseTypeList: [],
        jiangshilist: [],
        previewVisible: false,
        previewImage: '',
        previewVideoVisible: false,
        courseVideo: '',
        videoId: '',
        videouploadloading: false,
        imgTitle: '',
        isShowVlink: true
      }
    },
  created () {
    this.imgTitle = process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/previewImg?id=';
  },
    methods: {
      
        async beforeUpload(file, fileList){
            console.log(file)
            let src = await this.fileToBase64(file);
            this.courseImage = src;
            file.src = src;
            this.courseFile = file;
            return false;
        },
        fileToBase64(file){  
            return new Promise((resolve, reject) => {
                let reader = new FileReader();  
                reader.readAsDataURL(file);  
                reader.onload = function (e) {    
                    resolve(e.target.result)
                }
            })
            
        },
        deleteImg(){
            this.courseImage = '';
            this.courseFile = null;
        },
        deleteVideo(){
            this.videoId = '';
            this.courseVideo = '';
        },
      // 初始化方法
      edit (record, kechenglist, jiangshilist) {
        this.courseTypeList = kechenglist;
        this.jiangshilist = jiangshilist;
        this.visible = true;
        this.$nextTick(() => {
          if(record.imgId){
            this.courseImage = this.imgTitle + record.imgId;
          }
          if(record.videosId){
            this.courseVideo = this.imgTitle + record.videosId;
          }
          this.videoId = record.videosId;
          console.log(record)
          this.form.setFieldsValue(
            {
              Id: record.id,
              CourseName : record.courseName,
              CourseTypeId: record.courseTypeId,
              Coursesource: record.coursesource,
              LecturerId: record.lecturerId,
              Duration: record.duration,
              Description: record.description,
              IsEnable: record.isEnable,
              VideosLink: record.videosLink
            }
          )
          
          if(record.coursesource == 1){
            this.isShowVlink = false
          }
        })
      },

      oncheckboxChange(){

      },
      textChange(ht, txt){
        this.ArticleContent = ht;
      },

      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true;
        validateFields((errors, values) => {
          if (!errors) {
            var _form = new FormData();
            for (const key in values) {
              if (values.hasOwnProperty(key)) {
                _form.append(key, values[key])
              }
            }
            _form.append('File', this.courseFile)
            if(this.videoId){
              _form.append('VideosId', this.videoId)
            }
            
            courseEdit(_form).then((res) => {
              if (res.success) {
                this.$message.success('编辑成功')
                this.visible = false
                this.confirmLoading = false
                this.$emit('ok', values)
                this.form.resetFields()
              } else {
                this.$message.error('编辑失败：' + res.message)
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
                this.courseFile = null;
                this.courseImage = '';
                this.videoId = '';
                this.courseVideo = '';
                this.videouploadloading = false;
                this.previewVideoVisible = false;
                this.videosLink = ''
      },
      
        handlePreviewCancel() {
          this.previewVisible = false;
        },
        handlePreviewVideoCancel(){
          this.previewVideoVisible = false;
        },
        async handlePreview(file) {
          if(this.courseImage){
            this.previewVisible = true;
            return;
          }
          if (!file.src && !file.preview) {
            file.preview = await getBase64(file.originFileObj);
          }
          this.previewImage = file.src || file.preview;
          this.previewVisible = true;
        },
        handleVideoPreview(){
                this.previewVideoVisible = true;

        },
      /**
       * 上传视频
       */
      customRequest (data) {//data.file
          let that = this;
          let file = data.file;
          that.videouploadloading = true;
          let obj = {
                    file: file,
                    fileSize: file.size,
                    fileName: file.name,
                    fileType: file.type, 
                    callBack: function(data){
                        that.VideosId = data.id;
                        that.courseVideo = that.imgTitle + data.id;
                        that.videouploadloading = false;
                    },
                    uploading: null,
          }
          uploadCutFile.getFileResumableInfo(obj)
      },
    }
  }
</script>
